import React from 'react';
import actions from '../store/actions/counter1.js';
import { connect } from '../react-redux';

class Counter1 extends React.Component {
    render() {
        const { number } = this.props;
        return (
            <div>
                <p>{number}</p>
                <button onClick={this.props.add1}>加</button>
                <button onClick={this.props.minus1}>减</button>
                <button onClick={() => this.props.dispatch({type: 'MINUS'})}>减</button>
            </div>
        )
    }
}
// 一个映射函数，可以把仓库的状态进行映射出来分状态，分状态会成为组件属性对象。
let mapStateToProps = state => state.counter1;
let mapDispatchToProps = (dispatch) => {
    return {
        add1() {
            dispatch({ type: 'ADD1' });
        },
        minus1() {
            dispatch({ type: 'MINUS1' });
        },
        minus() {
            dispatch({ type: 'MINUS' });
        }
    }
}
// actions也会进行绑定，成为当前组件属性对象。
// export default connect(mapStateToProps, actions)(Counter1);
export default connect(mapStateToProps, mapDispatchToProps)(Counter1);

